<script setup>
import excelFile from './components/excelFile.vue'
import cameraScan from './components/cameraScan.vue'
import { ref } from 'vue'

const scanData = ref('')
const direction = ref('right')
const onToggleDirection = () => {
  direction.value = direction.value === 'right' ? 'left' : 'right'
}
</script>

<template>
  <div class="relative">
    <excelFile :scan-data="scanData" />
    <div class="absolute bottom-0 w-[100px] h-[100px] cursor-pointer z-20" :class="{ [direction]: true }"
      @click="onToggleDirection">
      <cameraScan @scanResult="scanData = $event" />
    </div>
  </div>
</template>

<style lang="less">
.right {
  right: 0;
}

.left {
  left: 0;
}
</style>
